<template>
    <div class="WinningList">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title" style="color:#141414">中奖榜单</h1>
        </header>
  
                <div class="allList">
                    <img src="../../img/Game/榜单排行.png" alt="">榜单排行
                </div>
                <div class="allone">
                    <div v-show="listarr[0]['username']">
                        <div class="alloneone">
                            <img class=" alloneimg1" src="../../img/Game/冠军.png" alt=""><img class=" alloneimg2" :src="$store.state.url+listarr[0]['avatar']" alt="">
                            <span class="font">{{listarr[0]['username']}}</span>
                            <div class="allonediv">
                                <p>累计获得金币</p>
                                <p class="pp">{{listarr[0]['win']}}</p>
                            </div>
                        </div>
                    </div>
                    <div v-for="(item,i) in listarr" :key=item.win v-show="i>0">
                        <div class=" b1order"></div>
                        <div class="alloneone">
                            <img class=" alloneimg2 alloneimg21" :src="$store.state.url+item['avatar']" alt="">
                            <span class="font">{{item['username']}}</span>
                            <div class="allonediv">
                                <p>累计获得金币</p>
                                <p class="pp">{{item['win']}}</p>
                            </div>
                        </div>
                    </div>
                </div>


    </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            selected: "1",
            listarr: [{username: "", nickname: "", avatar: "", win: ''}],
        };
    },
    mounted() {
        this.getList('all');
    },
    methods: {
        getList: function(type) {
            var Data={};
            Data['type']=type;//查询范围
            Data['page']=1;//当前分页
            Data['pagesize']=15;//分页大小
            this.$http.post("http://192.168.2.37/index.php/api/xjssc.xjssc/getList",Data).then(result => {
                if (result.body.code == 1) {
                    if(result.body.data[0]){
                        this.listarr=result.body.data;
                    }
                } else {
                    Toast(result.body.msg);
                }
            });
        },
    }
};
</script>
<style lang="scss" scoped>
.WinningList {
    padding-top: 44px;
    .mui-bar {
        background: #fff;
    }
    .mint-tab-item.is-selected {
        box-sizing: border-box;
        border-bottom: 0.04rem solid red;
    }
    .mint-tab-item {
        padding: 0.23rem 0;
        margin: 0 0.2rem;

        .c1 {
            font-size: 0.3rem;
            padding: 0 rem;
        }
    }
 .allList{
       padding:0.3rem 0.25rem ; 
 }
    .allone {
        padding-top:0.3em; 
        border-top: 1px solid #e0e0e0;
        .alloneone {
            background: #fff;
            height: 0.8rem;
            line-height: 1rem;
            padding-bottom: 1rem;
            .alloneimg1 {
                margin-left: 0.25rem;
                width: 0.42rem;
                height: 0.33rem;
                position: relative;
                top: 0.1rem;
            }
            .alloneimg2 {
                margin: 0 0.15rem;
                width: 0.52rem;
                height: 0.52rem;
                position: relative;
                top: 0.1rem;
            }
            .alloneimg21 {
                margin: 0 0.15rem 0 0.85rem;
            }
            .font {
                font-size: 0.26rem;
            }
            .allonediv {
                float: right;
                line-height: 0.4rem;
                padding-right: 0.3rem;
                text-align: right;
                position: relative;
                top: 0.1rem;

                p {
                    color: #e0e0e0;
                    font-size: 0.22rem;
                    margin: 0;
                }
                .pp {
                    color: #d51313;
                }
            }
        }
    }
}
</style>   